<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="dashboard/header :: header"></head>
<body>
	<div layout:fragment="content">
		<div class="container-fluid content-main">
			<div class="animated fadeIn">
				<input type="hidden" id="sourceId" name="sourceId" th:value="${param.id}" />
				<div class="row">
					<!-- /.col-->
					<div class="col-sm-12">
						<div class="card">
						
							<div th:switch="${bean.dockerBuildStatus}">
								<div class="card-body" th:case="'1'">
									<h3>构建状态</h3>  
									<div class="status-label">
										<i class="fas fa-sync-alt primary rotate"></i>
										<span>构建中 ... 
										</span>
									</div>
									<div style="margin-top:20px">
									  <div class="div-group">
										<h3 class="well-label">构建说明</h3>
										<div class="well" id="exampleInputEmail1">
											镜像构建一般耗时几分钟，请稍候 （*_^)
										</div>
									  </div>
									</div>
								</div>
								
								<div class="card-body" th:case="'2'">
									<h3>构建状态</h3>  
									<div class="status-label">
										<i class="fab fa-docker primary"></i>
										<span>构建成功! 
											&nbsp;&nbsp; (<a href="javascript:fastCI()">点击重构</a>)
										</span>
									</div>
									<div style="margin-top:20px">
									  <div class="div-group">
										<h3 class="well-label" for="exampleInputEmail1">登录阿里云Docker Registry</h3>
										<div class="well" id="exampleInputEmail1" placeholder="Email">
											<code>
												sudo docker login --username=阿里云仓库用户名 registry.cn-shenzhen.aliyuncs.com
											</code>
											<button class="copy-code-button" >复制</button>
										</div>
									  </div>
									  <div class="div-group">
										<h3 class="well-label" for="exampleInputEmail1">摘取镜像</h3>
										<div class="well" id="feignServerPath" placeholder="Email">
											<code>
												sudo docker pull [[${bean.dockerPath}]]:[镜像版本号]
											</code>
											<span style="display:none">
												sudo docker pull [[${bean.dockerPath}]]:latest 
											</span>
											<button class="copy-code-button" >复制</button>
										</div>
										<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 镜像尽量要带版本号</span>
									  </div>
									  <div class="div-group">
										<h3 class="well-label" for="exampleInputEmail1">运行示例</h3>
										<div class="well" id="feignServerPath" placeholder="Email">
											<code>	
													sudo docker run -p 8080:8080 [[${bean.dockerPath}]]:[镜像版本号] \ <br/> 
												  -e JAVA_TOOL_OPTIONS="-Xms128m -Xmx512m -Dspring.profiles.active=dev"  
											</code>
											<span style="display:none"> 
												sudo docker run -p 8080:8080 [[${bean.dockerPath}]]:latest -e JAVA_TOOL_OPTIONS="-Xms128m -Xmx512m -Dspring.profiles.active=dev"  			
											</span>
											<button class="copy-code-button" >复制</button>
										</div>
										<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 注意端口号</span>
									  </div>
									</div>
								</div>
								
								<div class="card-body" th:case="'3'">
									<h3>构建状态</h3>  
									<div class="status-label">
										<i class="fas fa-bomb danger"></i>
										<span>构建失败!
											&nbsp;&nbsp; (<a href="javascript:fastCI()">点击重构</a>)
										</span>
									</div>
									<div style="margin-top:20px">
									  <div class="div-group">
										<h3 class="well-label">一般原因</h3>
										<div class="well" id="exampleInputEmail1">
											1. 请确认基线是否正常可以访问<br/>
											2. 请确认地址是否正常地址
										</div>
									  </div>
									</div>
								</div>
								
								<div class="card-body" th:case="'4'">
									<h3>构建状态</h3>  
									<div class="status-label">
										<i class="fas fa-running primary"></i>
										<span>排队中 ... 
										</span>
									</div>
									<div style="margin-top:20px">
									  <div class="div-group">
										<h3 class="well-label">构建说明</h3>
										<div class="well" id="exampleInputEmail1">
											 服务器资源紧张，构建排队中，请稍候 （*_^)
										</div>
									  </div>
									</div>
								</div>

							  <!-- 待构建 -->
								<div class="card-body" th:case="*">
									<h3>构建状态</h3>  
									<div class="status-label">
										<i class="fas fa-running primary"></i>
										<span><a href="javascript:fastCI()">点击构建</a></span>
									</div>
									<div style="margin-top:20px">
									  <div class="div-group">
										<h3 class="well-label">构建说明</h3>
										<div class="well" id="exampleInputEmail1">
											 服务未构建，请点击进行镜像构建
										</div>
									  </div>
									</div>
								</div>
								
							</div>	
							
						</div>
					</div>
					<!-- /.col-->
				</div>
			</div>
		</div>

	</div>

	<footer th:replace="dashboard/footer :: footer"></footer>
	<script type="text/javascript" th:src="@{/resources/plugins/clipboard.js/clipboard.min.js}"></script>
	
	<script type="text/javascript">
		function fastCI(){
			var _id = $("input[id=sourceId]").val() ; 
			var downloadUrl = ctx + "portal/ucenter/source/docker?id=" + _id ;
		
			var loading = layer.load(1, {shade: [0.8,'#000']});
			
			$.get(downloadUrl , function(response){
				layer.close(loading) ;
				if(response.code == 200){
					window.location.reload();
				}else{
					$.modal.alert(response.message) ; 
				}
			},'JSON') ;
		}	
	
		$(function(){
			var clipboard = new ClipboardJS('.copy-code-button', {
				text: function (trigger) {
					var t = $.trim($(trigger).siblings("span").text()) ; 
					return t ; 
				}
			});
			
			clipboard.on('success', function (e) {
	            $.modal.msg("复制成功.");
	        });

	        clipboard.on('error', function (e) {
	            $.modal.msg("复制错误.");
	        });
		}) ; 
		
	</script>

</body>
</html>
